<template>
  <view class="login-container">
    <view class="login-header">
      <image src="/static/images/logo.png" mode="aspectFit" class="logo"></image>
      <text class="login-title">HomeHelper</text>
      <text class="login-subtitle">家政服务平台</text>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <image src="/static/images/icons/phone.png" mode="aspectFit" class="form-icon"></image>
        <input 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          class="form-input" 
          
        ></input>
      </view>
      
      <view class="form-item code-item">
        <image src="/static/images/icons/code.png" mode="aspectFit" class="form-icon"></image>
        <input 
          type="number" 
          v-model="code" 
          placeholder="请输入验证码" 
          class="form-input code-input" 
          maxlength="6"
        ></input>
        <button 
          class="get-code" 
          :disabled="!phone || sending" 
          @click="getCode"
        >{{ sending ? `${countdown}s后重新获取` : '获取验证码' }}</button>
      </view>
      
      <button class="login-btn" :disabled="!phone || !code" @click="handleLogin">登录</button>
      
      <view class="form-footer">
        <text class="agreement">登录即表示同意《用户协议》和《隐私政策》</text>
        <view class="register-link" @click="goToRegister">
          <text>还没有账号？</text>
          <text class="register-text">立即注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// import { uni } from '@dcloudio/uni-app';
import axios from 'axios'; // 引入 axios

// 定义响应式数据
const phone = ref('');
const code = ref('');
const sending = ref(false);
const countdown = ref(60);
const defaultCode = ref(12345)// 默认验证码
const datatable =ref({phone:""})



// 获取验证码
const getCode = () => {
	if(code.value){
		return
	}
	code.value=defaultCode.value
	// 发送验证码逻辑
	sending.value = true;
	uni.showToast({
	  title: '验证码已发送',
	  icon: 'none'
	});
  }
  
 
  
  // 倒计时
let timer = setInterval(() => {
  countdown.value--;
  if (countdown.value <= 0) {
    clearInterval(timer);
    sending.value = false;
    countdown.value = 60;
  }
}, 1000);


// 处理登录
const handleLogin = () => {
  // 验证手机号和验证码
  // if (!/^1[3-9]\d{9}$/.test(phone.value)) {
  //   uni.showToast({
  //     title: '请输入正确的手机号',
  //     icon: 'none'
  //   });
  //   return;
  // }
  
  if (!code.value) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    });
    return;
  }
  
  // 登录逻辑
   try {
      uni.showLoading({
        title: '登录中...'
      });
      
      // 发送登录请求
    axios.get(`http://localhost:3000/users?phone=${phone.value}`)
      .then(response => {
        const user = response.data;
		if (user.length > 0) {
		  // 登录成功
		  uni.setStorageSync('isLogin', true);
		  
		  uni.showToast({
		    title: '登录成功',
		    icon: 'success'
		  });
		  
		  setTimeout(() => {
		     uni.switchTab({
		       url: '/pages/index/index'
		     });

		  }, 1000);
		} else {
		  // 登录失败
		  uni.showToast({
		    title: '手机号或验证码错误',
		    icon: 'none'
		  });
		}
        console.log("数据为：", user);
        console.log("数据为", user[0].id);
      })
      .catch(error => {
        console.log("请求失败:", error);
      });

      
     
    } catch (error) {
      // 请求出错
      uni.showToast({
        title: '请求出错，请稍后重试',
        icon: 'none'
      });
    } 
};

// 跳转到注册页面
const goToRegister = () => {
  uni.navigateTo({ url: '/pages/register/register' });
};
</script>

<style lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
  
  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 160rpx;
    margin-bottom: 100rpx;
    
    .logo {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
    }
    
    .login-title {
      font-size: 50rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .login-subtitle {
      font-size: 30rpx;
      color: #666;
    }
  }
  
  .login-form {
    padding: 0 60rpx;
    
    .form-item {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #eee;
      padding: 20rpx 0;
      
      .form-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
      
      .form-input {
        flex: 1;
        font-size: 28rpx;
        height: 40rpx;
      }
    }
    
    .code-item {
      .code-input {
        width: 400rpx;
      }
      
      .get-code {
        font-size: 24rpx;
        color: #FF7D00;
        background-color: transparent;
        padding: 0;
      }
    }
    
    .login-btn {
      width: 100%;
      height: 88rpx;
      background-color: #FF7D00;
      color: #fff;
      font-size: 32rpx;
      border-radius: 44rpx;
      margin-top: 60rpx;
      margin-bottom: 30rpx;
    }
    
    .form-footer {
      .agreement {
        display: block;
        font-size: 22rpx;
        color: #999;
        text-align: center;
        margin-bottom: 40rpx;
      }
      
      .register-link {
        display: flex;
        justify-content: center;
        align-items: center;
        
        .register-text {
          color: #FF7D00;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>